<template>
	<view class="news-detail-container">
		<view class="news-header">
			<view class="news-title-section">
				<text class="news-title">{{ newsDetail.title }}</text>
				<view class="news-source">
					<image class="source-icon" :src="newsDetail.sourceIcon || '/static/default-source.png'"
						mode="aspectFit"></image>
					<text class="source-name">{{ newsDetail.source }}</text>
				</view>
			</view>

			<view class="author-section">
				<view class="author-info">
					<image class="author-avatar" :src="newsDetail.authorAvatar || '/static/default-avatar.png'"
						mode="aspectFill"></image>
					<view class="author-details">
						<text class="author-name">{{ newsDetail.author }}</text>
						<text class="publish-time">{{ newsDetail.publishTime }}</text>
					</view>
				</view>
				<view class="follow-btn" :class="{ followed: newsDetail.isFollowed }" @click="handleFollow">
					<text>{{ newsDetail.isFollowed ? '已关注' : '+ 关注' }}</text>
				</view>
			</view>
		</view>

		<!-- 新闻内容 -->
		<view class="news-content">
			<rich-text class="content-text" :nodes="newsDetail.content"></rich-text>

			<!-- 新闻图片 -->
			<view class="news-images" v-if="newsDetail.images && newsDetail.images.length">
				<image v-for="(img, index) in newsDetail.images" :key="index" class="content-image" :src="img"
					mode="widthFix" @click="previewImage(index)"></image>
			</view>
		</view>

		<!-- 新闻统计 -->
		<view class="news-stats">
			<view class="stat-item">
				<text class="stat-icon">👁️</text>
				<text class="stat-text">{{ newsDetail.views || 0 }} 阅读</text>
			</view>
			<view class="stat-item">
				<text class="stat-icon">💬</text>
				<text class="stat-text">{{ newsDetail.commentCount || 0 }} 评论</text>
			</view>
			<view class="stat-item">
				<text class="stat-icon">👍</text>
				<text class="stat-text">{{ newsDetail.likeCount || 0 }} 点赞</text>
			</view>
		</view>

		<!-- 精彩推荐 -->
		<view class="recommend-section" v-if="recommendList.length">
			<view class="section-header">
				<text class="section-title">精彩推荐</text>
			</view>
			<view class="recommend-list">
				<view v-for="item in recommendList" :key="item.id" class="recommend-item"
					@click="goToNewsDetail(item.id)">
					<view class="recommend-content">
						<text class="recommend-title">{{ item.title }}</text>
						<view class="recommend-meta">
							<text class="recommend-source">{{ item.source }}</text>
							<text class="recommend-time">{{ item.time }}</text>
						</view>
					</view>
					<image v-if="item.image" class="recommend-image" :src="item.image" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<!-- 评论区域 -->
		<view class="comment-section">
			<view class="section-header">
				<text class="section-title">评论 {{ commentList.length }}</text>
			</view>

			<!-- 评论列表 -->
			<view class="comment-list">
				<view v-for="comment in commentList" :key="comment.id" class="comment-item">
					<image class="comment-avatar" :src="comment.avatar" mode="aspectFill"></image>
					<view class="comment-content">
						<view class="comment-header">
							<text class="comment-author">{{ comment.author }}</text>
							<text class="comment-time">{{ comment.time }}</text>
						</view>
						<text class="comment-text">{{ comment.content }}</text>
						<view class="comment-actions">
							<view class="action-item" @click="handleLikeComment(comment.id)">
								<text class="action-icon">{{ comment.isLiked ? '❤️' : '🤍' }}</text>
								<text class="action-text">{{ comment.likeCount }}</text>
							</view>
							<view class="action-item" @click="handleReply(comment.id)">
								<text class="action-icon">↩️</text>
								<text class="action-text">回复</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载更多 -->
			<view class="load-more" v-if="hasMoreComments" @click="loadMoreComments">
				<text class="load-more-text">加载更多评论</text>
			</view>
		</view>

		<!-- 底部评论输入框 -->
		<view class="comment-input-section">
			<view class="input-container">
				<input class="comment-input" placeholder="写下你的评论..." v-model="commentText" @confirm="submitComment" />
				<view class="input-actions">
					<text class="action-btn" :class="{ liked: newsDetail.isLiked }" @click="handleLikeNews">
						{{ newsDetail.isLiked ? '❤️' : '🤍' }}
					</text>
					<text class="action-btn" @click="handleShare">📤</text>
					<text class="action-btn submit-btn" @click="submitComment">发布</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const mockApi = {
		// 获取新闻详情
		getNewsDetail: (id) => {
			return new Promise((resolve) => {
				setTimeout(() => {
					const newsData = {
						1: {
							id: 1,
							title: "2020，我们温暖的记忆",
							source: "新闻联播",
							sourceIcon: "/static/news-icon.png",
							author: "央视新闻",
							authorAvatar: "/static/author1.png",
							publishTime: "2025-10-28 10:30",
							content: `<p>2020年是不平凡的一年，我们共同经历了挑战，也收获了成长。在这一年里，无数温暖的瞬间让我们感动。</p>
		                            <p>从抗疫一线的医护人员到坚守岗位的普通工作者，从志愿者的无私奉献到邻里之间的互帮互助，每一个故事都值得我们铭记。</p>
		                            <p>这些温暖的记忆将永远激励我们前行，让我们更加珍惜当下的生活，更加坚定地走向未来。</p>`,
							images: [
								"/static/news-detail1.jpg",
								"/static/news-detail2.jpg"
							],
							views: 12450,
							commentCount: 405,
							likeCount: 892,
							isFollowed: false,
							isLiked: false
						},
						2: {
							id: 2,
							title: "森林大县57年无大火是怎么做到的",
							source: "光明网",
							sourceIcon: "/static/light-icon.png",
							author: "环保在线",
							authorAvatar: "/static/author2.png",
							publishTime: "2025-10-28 09:15",
							content: `<p>在森林防火工作中，这个县城创造了57年无重大森林火灾的奇迹。他们究竟是怎么做到的？</p>
		                            <p>首先，建立了完善的防火预警系统，通过无人机巡护、红外监测等技术手段，实现全天候监控。</p>
		                            <p>其次，加强群众防火意识教育，每年开展防火演练，让防火知识深入人心。</p>
		                            <p>最后，建立了专业的防火队伍，确保一旦发现火情能够快速响应、及时处置。</p>`,
							images: [
								"/static/forest1.jpg"
							],
							views: 8920,
							commentCount: 234,
							likeCount: 567,
							isFollowed: true,
							isLiked: true
						},
						3: {
							id: 3,
							title: "“开板”迎客！一季到四季、小众到大众 冰雪运动边界拓展释放消费新潜力",
							source: "大河网",
							sourceIcon: "/static/dahe-icon.png",
							author: "体育在线",
							authorAvatar: "/static/author3.png",
							publishTime: "2025-10-28 14:20",
							content: `<p>随着冰雪运动的普及和发展，相关产业链不断延伸，为消费市场注入了新的活力。</p>
		                            <p>从传统的滑雪、滑冰到新兴的冰雪旅游、冰雪装备，冰雪经济的边界正在不断拓展。</p>
		                            <p>这种跨界融合不仅带动了相关产业的发展，也为消费者提供了更加多元化的选择。</p>`,
							images: [
								"/static/ice-sports1.jpg"
							],
							views: 7560,
							commentCount: 189,
							likeCount: 432,
							isFollowed: false,
							isLiked: false
						},
						4: {
							id: 4,
							title: "步履坚实、成果丰硕 “数”里行间看进博会精彩答卷",
							source: "央视网",
							sourceIcon: "/static/cctv-icon.png",
							author: "经济观察",
							authorAvatar: "/static/author4.png",
							publishTime: "2025-10-28 16:45",
							content: `<p>进博会作为中国对外开放的重要平台，取得了丰硕的成果。</p>
		                            <p>从参展企业数量到成交金额，从新技术发布到国际合作签约，各项数据都创下新高。</p>
		                            <p>这不仅展现了中国市场的巨大潜力，也为全球经济发展注入了新的动力。</p>`,
							images: [
								"/static/expo1.jpg"
							],
							views: 9830,
							commentCount: 312,
							likeCount: 678,
							isFollowed: false,
							isLiked: false
						},
						5: {
							id: 5,
							title: "跨界融合激活创新动能“飞”出发展新空间 低空经济从概念蓝图迈向体系落地",
							source: "央视网",
							sourceIcon: "/static/cctv-icon.png",
							author: "科技前沿",
							authorAvatar: "/static/author5.png",
							publishTime: "2025-10-28 11:30",
							content: `<p>低空经济作为新兴产业，正在从概念走向现实。</p>
		                            <p>无人机物流、空中交通、航空旅游等应用场景不断拓展，为经济发展开辟了新的空间。</p>
		                            <p>这种跨界融合不仅激活了创新动能，也为产业升级提供了新的路径。</p>`,
							images: [
								"/static/drone1.jpg",
								"/static/drone2.jpg"
							],
							views: 11200,
							commentCount: 456,
							likeCount: 789,
							isFollowed: false,
							isLiked: false
						},
						6: {
							id: 6,
							title: "绾青丝着唐装、走进书中美景……传统文化生动破圈撬动消费澎湃活力",
							source: "央视网",
							sourceIcon: "/static/cctv-icon.png",
							author: "文化传承",
							authorAvatar: "/static/author6.png",
							publishTime: "2025-11-05 13:15",
							content: `<p>传统文化正在以新的形式走进现代生活，展现出强大的生命力。</p>
		                            <p>从汉服体验到古风摄影，从传统工艺到文化研学，各种创新形式让传统文化焕发新的活力。</p>
		                            <p>这种文化破圈不仅丰富了人们的精神生活，也带动了相关产业的发展。</p>`,
							images: [
								"/static/culture1.jpg",
								"/static/culture2.jpg"
							],
							views: 8670,
							commentCount: 278,
							likeCount: 543,
							isFollowed: false,
							isLiked: false
						},
						7: {
							id: 7,
							title: "进博会接力广交会 更多国家搭上中国对外开放顺风车",
							source: "央视网",
							sourceIcon: "/static/cctv-icon.png",
							author: "国际观察",
							authorAvatar: "/static/author7.png",
							publishTime: "2025-11-05 15:20",
							content: `<p>中国通过进博会、广交会等平台，为世界各国提供了共享发展机遇的窗口。</p>
		                            <p>越来越多的国家通过这些平台进入中国市场，分享中国发展的红利。</p>
		                            <p>这种开放合作不仅促进了贸易往来，也加深了国际间的理解和友谊。</p>`,
							images: [
								"/static/trade1.jpg"
							],
							views: 7450,
							commentCount: 198,
							likeCount: 321,
							isFollowed: false,
							isLiked: false
						}
					};

					// 如果找不到对应的ID，返回一个默认的错误新闻
					if (!newsData[id]) {
						resolve({
							code: 404,
							data: {
								id: id,
								title: "新闻不存在",
								source: "系统提示",
								sourceIcon: "/static/default-source.png",
								author: "系统",
								authorAvatar: "/static/default-avatar.png",
								publishTime: new Date().toLocaleDateString(),
								content: `<p>抱歉，您要查看的新闻暂时无法加载。</p>
		                                <p>新闻ID: ${id}</p>
		                                <p>请稍后再试或返回新闻列表。</p>`,
								images: [],
								views: 0,
								commentCount: 0,
								likeCount: 0,
								isFollowed: false,
								isLiked: false
							}
						});
						return;
					}

					resolve({
						code: 200,
						data: newsData[id]
					});
				}, 800);
			});
		},

		// 获取精彩推荐
		getRecommendList: () => {
			return new Promise((resolve) => {
				setTimeout(() => {
					resolve({
						code: 200,
						data: [{
								id: 3,
								title: "冰雪运动边界拓展释放消费新潜力",
								source: "大河网",
								time: "2小时前",
								image: "/static/recommend1.jpg"
							},
							{
								id: 4,
								title: "进博会接力广交会，更多国家搭上中国对外开放顺风车",
								source: "央视网",
								time: "4小时前",
								image: "/static/recommend2.jpg"
							},
							{
								id: 5,
								title: "跨界融合激活创新动能，低空经济从概念蓝图迈向体系落地",
								source: "新华网",
								time: "6小时前",
								image: "/static/recommend3.jpg"
							}
						]
					});
				}, 600);
			});
		},

		// 获取评论列表
		getCommentList: (newsId, page = 1) => {
			return new Promise((resolve) => {
				setTimeout(() => {
					const comments = [{
							id: 1,
							author: "热心网友",
							avatar: "/static/user1.png",
							content: "这篇文章写得真好，让我想起了很多温暖的瞬间！",
							time: "2小时前",
							likeCount: 24,
							isLiked: false
						},
						{
							id: 2,
							author: "环保志愿者",
							avatar: "/static/user2.png",
							content: "森林防火工作确实很重要，希望更多地方能学习这种经验。",
							time: "3小时前",
							likeCount: 18,
							isLiked: true
						},
						{
							id: 3,
							author: "新闻爱好者",
							avatar: "/static/user3.png",
							content: "期待更多这样有深度的报道，让我们了解背后的故事。",
							time: "4小时前",
							likeCount: 12,
							isLiked: false
						}
					];
					resolve({
						code: 200,
						data: {
							list: comments,
							hasMore: page < 2
						}
					});
				}, 500);
			});
		},

		// 关注用户
		followAuthor: (authorId) => {
			return new Promise((resolve) => {
				setTimeout(() => {
					resolve({
						code: 200,
						message: "关注成功"
					});
				}, 300);
			});
		},

		// 取消关注
		unfollowAuthor: (authorId) => {
			return new Promise((resolve) => {
				setTimeout(() => {
					resolve({
						code: 200,
						message: "取消关注成功"
					});
				}, 300);
			});
		},

		// 点赞新闻
		likeNews: (newsId) => {
			return new Promise((resolve) => {
				setTimeout(() => {
					resolve({
						code: 200,
						message: "点赞成功"
					});
				}, 300);
			});
		},

		// 取消点赞新闻
		unlikeNews: (newsId) => {
			return new Promise((resolve) => {
				setTimeout(() => {
					resolve({
						code: 200,
						message: "取消点赞成功"
					});
				}, 300);
			});
		},

		// 点赞评论
		likeComment: (commentId) => {
			return new Promise((resolve) => {
				setTimeout(() => {
					resolve({
						code: 200,
						message: "点赞成功"
					});
				}, 300);
			});
		},

		// 取消点赞评论
		unlikeComment: (commentId) => {
			return new Promise((resolve) => {
				setTimeout(() => {
					resolve({
						code: 200,
						message: "取消点赞成功"
					});
				}, 300);
			});
		},

		// 提交评论
		submitComment: (newsId, content) => {
			return new Promise((resolve) => {
				setTimeout(() => {
					resolve({
						code: 200,
						data: {
							id: Date.now(),
							author: "当前用户",
							avatar: "/static/current-user.png",
							content: content,
							time: "刚刚",
							likeCount: 0,
							isLiked: false
						},
						message: "评论成功"
					});
				}, 500);
			});
		}
	};

	export default {
		name: "newsDetail",
		data() {
			return {
				newsId: null,
				newsDetail: {
					title: '',
					source: '',
					sourceIcon: '',
					author: '',
					authorAvatar: '',
					publishTime: '',
					content: '',
					images: [],
					views: 0,
					commentCount: 0,
					likeCount: 0,
					isFollowed: false,
					isLiked: false
				},
				recommendList: [],
				commentList: [],
				commentText: '',
				hasMoreComments: true,
				currentCommentPage: 1
			}
		},
		onLoad(options) {
			this.newsId = options.id || 1;
			this.loadNewsDetail();
			this.loadRecommendList();
			this.loadComments();
		},
		onPullDownRefresh() {
			this.loadNewsDetail();
			this.loadRecommendList();
			this.loadComments();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 加载新闻详情
			async loadNewsDetail() {
				try {
					const result = await mockApi.getNewsDetail(this.newsId);
					if (result.code === 200) {
						this.newsDetail = result.data;
						// 更新页面标题
						uni.setNavigationBarTitle({
							title: this.newsDetail.source
						});
					}
				} catch (error) {
					console.error('加载新闻详情失败:', error);
					uni.showToast({
						title: '加载失败',
						icon: 'error'
					});
				}
			},

			// 加载推荐列表
			async loadRecommendList() {
				try {
					const result = await mockApi.getRecommendList();
					if (result.code === 200) {
						this.recommendList = result.data;
					}
				} catch (error) {
					console.error('加载推荐列表失败:', error);
				}
			},

			// 加载评论
			async loadComments() {
				try {
					const result = await mockApi.getCommentList(this.newsId, this.currentCommentPage);
					if (result.code === 200) {
						if (this.currentCommentPage === 1) {
							this.commentList = result.data.list;
						} else {
							this.commentList = [...this.commentList, ...result.data.list];
						}
						this.hasMoreComments = result.data.hasMore;
					}
				} catch (error) {
					console.error('加载评论失败:', error);
				}
			},

			// 加载更多评论
			loadMoreComments() {
				this.currentCommentPage++;
				this.loadComments();
			},

			// 处理关注
			async handleFollow() {
				try {
					if (this.newsDetail.isFollowed) {
						const result = await mockApi.unfollowAuthor(this.newsDetail.author);
						if (result.code === 200) {
							this.newsDetail.isFollowed = false;
							uni.showToast({
								title: '取消关注成功',
								icon: 'success'
							});
						}
					} else {
						const result = await mockApi.followAuthor(this.newsDetail.author);
						if (result.code === 200) {
							this.newsDetail.isFollowed = true;
							uni.showToast({
								title: '关注成功',
								icon: 'success'
							});
						}
					}
				} catch (error) {
					console.error('操作失败:', error);
					uni.showToast({
						title: '操作失败',
						icon: 'error'
					});
				}
			},

			// 处理新闻点赞
			async handleLikeNews() {
				try {
					if (this.newsDetail.isLiked) {
						const result = await mockApi.unlikeNews(this.newsId);
						if (result.code === 200) {
							this.newsDetail.isLiked = false;
							this.newsDetail.likeCount--;
							uni.showToast({
								title: '取消点赞',
								icon: 'success'
							});
						}
					} else {
						const result = await mockApi.likeNews(this.newsId);
						if (result.code === 200) {
							this.newsDetail.isLiked = true;
							this.newsDetail.likeCount++;
							uni.showToast({
								title: '点赞成功',
								icon: 'success'
							});
						}
					}
				} catch (error) {
					console.error('点赞失败:', error);
				}
			},

			// 处理评论点赞
			async handleLikeComment(commentId) {
				try {
					const comment = this.commentList.find(item => item.id === commentId);
					if (comment) {
						if (comment.isLiked) {
							const result = await mockApi.unlikeComment(commentId);
							if (result.code === 200) {
								comment.isLiked = false;
								comment.likeCount--;
							}
						} else {
							const result = await mockApi.likeComment(commentId);
							if (result.code === 200) {
								comment.isLiked = true;
								comment.likeCount++;
							}
						}
					}
				} catch (error) {
					console.error('点赞评论失败:', error);
				}
			},

			// 处理回复
			handleReply(commentId) {
				const comment = this.commentList.find(item => item.id === commentId);
				if (comment) {
					this.commentText = `回复 ${comment.author}: `;
					uni.pageScrollTo({
						selector: '.comment-input-section',
						duration: 300
					});
				}
			},

			// 提交评论
			async submitComment() {
				if (!this.commentText.trim()) {
					uni.showToast({
						title: '请输入评论内容',
						icon: 'none'
					});
					return;
				}

				try {
					const result = await mockApi.submitComment(this.newsId, this.commentText);
					if (result.code === 200) {
						this.commentList.unshift(result.data);
						this.newsDetail.commentCount++;
						this.commentText = '';
						uni.showToast({
							title: '评论成功',
							icon: 'success'
						});
					}
				} catch (error) {
					console.error('评论失败:', error);
					uni.showToast({
						title: '评论失败',
						icon: 'error'
					});
				}
			},

			// 分享
			handleShare() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "https://example.com/news/" + this.newsId,
					title: this.newsDetail.title,
					summary: this.newsDetail.content.replace(/<[^>]+>/g, '').substring(0, 100),
					success: function(res) {
						uni.showToast({
							title: '分享成功',
							icon: 'success'
						});
					},
					fail: function(err) {
						uni.showToast({
							title: '分享失败',
							icon: 'error'
						});
					}
				});
			},

			// 图片预览
			previewImage(index) {
				uni.previewImage({
					urls: this.newsDetail.images,
					current: index
				});
			},

			// 跳转到新闻详情 - 修改为正确的路径
			goToNewsDetail(id) {
				uni.navigateTo({
					url: `/pages/newsDetail/newsDetail?id=${id}`
				});
			}
		}
	}
</script>

<style scoped>
	/* 样式保持不变，与您提供的代码一致 */
	.news-detail-container {
		min-height: 100vh;
		background: #f5f5f5;
		padding-bottom: 120rpx;
	}

	.news-header {
		background: white;
		padding: 40rpx 32rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.news-title-section {
		margin-bottom: 30rpx;
	}

	.news-title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
		line-height: 1.4;
		display: block;
		margin-bottom: 20rpx;
	}

	.news-source {
		display: flex;
		align-items: center;
	}

	.source-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 12rpx;
		border-radius: 6rpx;
	}

	.source-name {
		font-size: 26rpx;
		color: #666;
	}

	.author-section {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.author-info {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.author-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.author-details {
		display: flex;
		flex-direction: column;
	}

	.author-name {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 6rpx;
	}

	.publish-time {
		font-size: 24rpx;
		color: #999;
	}

	.follow-btn {
		padding: 12rpx 24rpx;
		border: 2rpx solid #007AFF;
		border-radius: 30rpx;
		font-size: 24rpx;
		color: #007AFF;
		background: white;
		transition: all 0.3s;
	}

	.follow-btn.followed {
		background: #f0f0f0;
		color: #666;
		border-color: #f0f0f0;
	}

	.news-content {
		background: white;
		padding: 30rpx 32rpx;
		margin-bottom: 20rpx;
	}

	.content-text {
		font-size: 30rpx;
		line-height: 1.6;
		color: #333;
		margin-bottom: 30rpx;
	}

	.news-images {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.content-image {
		width: 100%;
		border-radius: 12rpx;
	}

	.news-stats {
		background: white;
		padding: 24rpx 32rpx;
		display: flex;
		justify-content: space-around;
		border-bottom: 1rpx solid #f0f0f0;
		margin-bottom: 20rpx;
	}

	.stat-item {
		display: flex;
		align-items: center;
	}

	.stat-icon {
		margin-right: 12rpx;
		font-size: 28rpx;
	}

	.stat-text {
		font-size: 24rpx;
		color: #666;
	}

	.section-header {
		padding: 24rpx 32rpx;
		background: white;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.recommend-section {
		background: white;
		margin-bottom: 20rpx;
	}

	.recommend-list {
		padding: 0 32rpx;
	}

	.recommend-item {
		display: flex;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #f8f8f8;
	}

	.recommend-item:last-child {
		border-bottom: none;
	}

	.recommend-content {
		flex: 1;
		margin-right: 20rpx;
	}

	.recommend-title {
		font-size: 28rpx;
		color: #333;
		line-height: 1.4;
		display: block;
		margin-bottom: 12rpx;
	}

	.recommend-meta {
		display: flex;
		align-items: center;
	}

	.recommend-source {
		font-size: 22rpx;
		color: #666;
		margin-right: 20rpx;
	}

	.recommend-time {
		font-size: 22rpx;
		color: #999;
	}

	.recommend-image {
		width: 160rpx;
		height: 120rpx;
		border-radius: 8rpx;
	}

	.comment-section {
		background: white;
		margin-bottom: 20rpx;
	}

	.comment-list {
		padding: 0 32rpx;
	}

	.comment-item {
		display: flex;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #f8f8f8;
	}

	.comment-item:last-child {
		border-bottom: none;
	}

	.comment-avatar {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.comment-content {
		flex: 1;
	}

	.comment-header {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.comment-author {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
		margin-right: 20rpx;
	}

	.comment-time {
		font-size: 22rpx;
		color: #999;
	}

	.comment-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
		margin-bottom: 16rpx;
	}

	.comment-actions {
		display: flex;
		align-items: center;
	}

	.action-item {
		display: flex;
		align-items: center;
		margin-right: 30rpx;
	}

	.action-icon {
		margin-right: 8rpx;
		font-size: 24rpx;
	}

	.action-text {
		font-size: 22rpx;
		color: #666;
	}

	.load-more {
		text-align: center;
		padding: 30rpx;
		color: #007AFF;
		font-size: 26rpx;
	}

	.comment-input-section {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		padding: 20rpx 32rpx;
		border-top: 1rpx solid #f0f0f0;
		box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.input-container {
		display: flex;
		align-items: center;
	}

	.comment-input {
		flex: 1;
		background: #f8f9fa;
		border-radius: 30rpx;
		padding: 20rpx 24rpx;
		font-size: 28rpx;
		margin-right: 20rpx;
	}

	.input-actions {
		display: flex;
		align-items: center;
	}

	.action-btn {
		padding: 12rpx;
		font-size: 28rpx;
		margin-left: 20rpx;
	}

	.action-btn.liked {
		color: #ff0000;
	}

	.submit-btn {
		background: #007AFF;
		color: white;
		padding: 12rpx 24rpx;
		border-radius: 30rpx;
		font-size: 26rpx;
	}

	@media (max-width: 768rpx) {

		.news-header,
		.news-content,
		.section-header,
		.recommend-list,
		.comment-list {
			padding-left: 24rpx;
			padding-right: 24rpx;
		}

		.news-title {
			font-size: 36rpx;
		}

		.comment-input-section {
			padding: 20rpx 24rpx;
		}
	}
</style>